/*
 * @Author: xiaosihan 
 * @Date: 2024-05-27 14:57:41 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-05-27 22:57:34
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./btns.module.less";
import homeStore from "../homeStore";
import clsx from "clsx";

interface Iprops {
    children?: ReactNode
}

// 按钮组
export default function Btns() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [showFlyLine, setShowFlyLine] = useState(homeStore.showFlyLine);
    const [showScatter, setShowScatter] = useState(homeStore.showScatter);
    const [showPoint, setShowPoint] = useState(homeStore.showPoint);
    const [showsPrite, setShowsPrite] = useState(homeStore.showsPrite);



    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShowFlyLine(homeStore.showFlyLine);
        setShowScatter(homeStore.showScatter);
        setShowPoint(homeStore.showPoint);
        setShowsPrite(homeStore.showsPrite);
    }), []);

    return (
        <div className={styles.btns} >
            <div
                onClick={() => homeStore.setShowFlyLine(!homeStore.showFlyLine)}
                className={clsx(showFlyLine && styles.active, styles.btn)}
            >飞线</div>
            <div
                onClick={() => homeStore.setShowScatter(!homeStore.showScatter)}
                className={clsx(showScatter && styles.active, styles.btn)}
            >散点图</div>
            <div
                onClick={() => homeStore.setShowPoint(!homeStore.showPoint)}
                className={clsx(showPoint && styles.active, styles.btn)}
            >重点点位</div>
            <div
                onClick={() => homeStore.setShowsPrite(!homeStore.showsPrite)}
                className={clsx(showsPrite && styles.active, styles.btn)}
            >粒子特效</div>
        </div>
    );

}